<template>
  <div class="app-container bg-gray">
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
    <div v-if="isShow" class="signed">
      <div class="title">
        <img src="../../images/signed.png" alt="">
        <div>已签到</div>
        <el-select v-model="sort" size="mini" style="width: 120px;" @change="getData">
          <el-option value="1" label="打卡时间"/>
          <el-option value="2" label="派单量"/>
          <el-option value="3" label="成单量"/>
        </el-select>
      </div>
      <ul>
        <li v-for="(item, index) in signedList" :key="index" class="card" @click="memberClick(item.id)">
          <img :src="item.wechat_pic?(item.wechat_pic.indexOf('http')>=0?item.wechat_pic:imageUrl+item.wechat_pic):defaultAvatar" alt="">
          <h1>{{ item.name }}<span> ({{ item.company_name }})</span></h1>
          <div />
          <p>打卡时间：{{ parseTime(item.work_time, '{h}:{i}:{s}') }}</p>
          <p>今日派单：{{ item.customer_number }}</p>
          <p>当月成交：{{ item.month_deal_number }}</p>
          <span class="card-caption open-down">
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>入职时间:&nbsp;&nbsp;{{ parseTime(item.hiredate,'{y}-{m}-{d}') }}</p>
            <p>工作状态:&nbsp;&nbsp;{{ item.work_status===1?'接待':'不接待' }}</p>
            <p>本月客户数:&nbsp;&nbsp;{{ item.month_customer_number }}</p>
            <p>本月成交数:&nbsp;&nbsp;{{ item.month_deal_number }}</p>
          </span>
        </li>
      </ul>
    </div>

    <div v-if="isShow" class="unsigned">
      <div class="title">
        <img src="../../images/signed.png" alt="">
        <div>未签到</div>
      </div>
      <ul>
        <li v-for="(item, index) in unsignedList" :key="index" @click="memberClick(item.id)">
          <img :src="item.wechat_pic?(item.wechat_pic.indexOf('http')>=0?item.wechat_pic:imageUrl+item.wechat_pic):defaultAvatar" alt="">
          <h1>{{ item.name }}<span> ({{ item.company_name }})</span></h1>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import defaultAvatar from '../../images/default_avatar.png'
import { parseTime } from '../../utils/table'
export default {
  data() {
    return {
      sort: '1',
      imageUrl: '',
      defaultAvatar: defaultAvatar,

      isShow: false,

      signedList: [],
      unsignedList: []
    }
  },
  watch: {
    $route(to) {
      if (to.name === '打卡签到') {
        this.getData();
        setTimeout(() => {
          this.isShow = true;
        }, 500);
      } else {
        this.isShow = false;
      }
    }
  },
  created() {
    if (this.$route.name === '打卡签到') {
      this.isShow = true;
      this.getData();
    }
  },
  methods: { parseTime,
    getData() {
      const url = 'statistic/work-list';
      const data = {sort: this.sort};
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.signedList = res.data.on_work
        this.unsignedList = res.data.out_of_work
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    memberClick(id) {
      this.isShow = false;
      this.$router.push({
        path: '/workbench/sign_in/personalty',
        query: { id: id }
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../styles/index.scss';
.signed {
  .title {
    @include flex-row(center, flex-start);
    img {
      width: 24px;
      height: 24px;
    }
    div {
      padding-left: 10px;
      font-size: 20px;
    }
  }
  > ul {
    @include flex-row(center, flex-start);
    flex-wrap: wrap;
    list-style: none;
    padding: 0 0 0 30px;
    > li {
      cursor: pointer;
      width: 176px;
      margin: 6px;
      background-color: #fff;
      border: 1px solid #f1f2f3;
      padding: 20px 20px 10px 20px;
      border-radius: 4px;
      > img {
        width: 90px;
        height: 90px;
        border-radius: 90px;
        margin-left: 23px;
      }
      > h1 {
        font-size: 16px;
        font-weight: normal;
        @extend .text-center;
        span {
          color: $textGray;
        }
      }
      > p {
        font-size: 13px;
        color: $textGray;
        line-height: 10px;
      }
      > div {
        background-color: $green;
        width: 24px;
        height: 2px;
        margin: 10px auto;
      }
      .card-caption{
        font-size: 13px;
        color: #fff;
      }
    }
  }
}

.unsigned {
  @extend .signed;
  > ul {
    > li {
      width: 156px;
      padding: 10px 10px 5px 10px;
      > img {
        margin-left: 23px;
      }
    }
    >li:hover{
      box-shadow: 0 0 10px #bbb;
    }
  }
}

.card {
  position: relative;
  overflow: hidden;
  display: inline-block;
  animation: anima 2s;
  -webkit-animation: anima 2s;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-caption {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(44, 62, 80, 0.92);
  padding: 10px;
  text-align: center;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}

.card-title {
  font-size: 18px;
}

.card .card-caption,
.card:hover .card-caption:hover {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.card:hover .open-down {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.open-down {
  -webkit-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  top: 0;
  left: 0;
}

.card:hover .open-down {
  -webkit-transform: rotateX(0);
  -ms-transform: rotateX(0);
  transform: rotateX(0);
}
</style>

